/** 
 *  A method to match tags
 *  match Mode 
 *  0. match string
 *  1. match HTML tag name
 *  2. mtach HTML tag header
 *  3. match HTML content
*/
/* 0.文本模板 */
let template = `<h1>你好,duo框架!</h1> 123<img /> <a>a链接</a> <div id="box"><div>我爱中国</div></div> `
/* 1.分割文本为单个字符 */
let templateArr = template.split('');
/* 2.初始化一些参数 */
let tempStr = ''; // 临时匹配的字符串
let resultArr = []; // 最终返回的标签数组
let matchTagStartTimes = 0; // 标签头个数
let matchTagEndTimes = 0; // 标签尾个数
let tagName = '';
let matchMode = 0; // 匹配字符串文本模式
/* 3.遍历字符串 */
templateArr.forEach(_itemStr => {
    tempStr += _itemStr;
    switch (matchMode) {
        case 0: handleMatchString(_itemStr); break;
        case 1: handleMatchTagName(_itemStr); break;
        case 2: handleMatchTagHeader(_itemStr); break;
        case 3: handleMatchTagContent(); break;
    }
})

console.log(resultArr);

/* 4.工具函数 */

/* 清空临时存储字符变量 */
function clearStr() {
    tempStr = '';
}

/* 0.处理匹配字符串 */
function handleMatchString(_str) {
    if (_str === '<') {
        if (tempStr.length > 1) {
            resultArr.push(tempStr.slice(0, -1)); // 把字符串加入返回数组里面
        }
        clearStr(); // 清空临时文本 
        matchMode = 1; // 打开匹配标签名模式
    }
}

/* 1.匹配标签名模式 */
function handleMatchTagName(_str) {
    if (/\s|[>]|[\/]/.test(_str)) {
        tagName = tempStr.slice(0, -1); // 存储标签名
        if (_str === '>') {
            matchMode = 3; // 打开匹配标签内容模式
        } else if (/\/>/.test(tempStr)) {
            resultArr.push('<' + tempStr); // 把字符串加入返回数组里面
            clearStr(); // 清空临时文本
            matchMode = 0; // 匹配字符串模式
        } else {
            matchMode = 2; // 打开匹配标签头模式
        }
    }
}

/* 2.配标签头模式 */
function handleMatchTagHeader(_str) {
    if (/\/>/.test(tempStr)) {
        resultArr.push('<' + tempStr); // 把字符串加入返回数组里面
        clearStr(); // 清空临时文本
        matchMode = 0; // 匹配字符串模式
    } else if (_str === '>') {
        matchMode = 3; // 打开匹配标签内容模式
    }
}

/* 3.匹配标签内容模式 */
function handleMatchTagContent() {
    let regExpTagHeader = new RegExp(`<${tagName}.*>`, 'gi')
    let regExpTagFooter = new RegExp(`</${tagName}>`, 'gi')
    if (regExpTagFooter.test(tempStr)) {
        matchTagStartTimes = tempStr.match(regExpTagHeader) && tempStr.match(regExpTagHeader).length || 0;
        matchTagEndTimes = tempStr.match(regExpTagFooter).length;
        if (matchTagEndTimes - matchTagStartTimes === 1) {
            resultArr.push('<' + tempStr); // 把字符串加入返回数组里面
            matchMode = 0; // 匹配字符串模式
            clearStr(); // 清空临时文本
        }
    }
}

